window.onload = function () {
    var containerc =  document.getElementById("containerc");
    var bannerb = document.getElementById("bannerb");
    var li = document.querySelectorAll("#bannerb li");
    var spanNode = document.querySelectorAll("#buttons span");
    var img = document.getElementById("immm");

    //前后按钮
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');

    //索引
    var index = 1;
    var timer = 0;

    //给 containerc 设置宽，高，以及overflow:hidder
    containerc.style.width = img.offsetWidth + "px";
    containerc.style.height = img.offsetHeight + "px";
    containerc .style.overflow = "hidden";

    //给bannerb 设置宽高
    bannerb.style.height = img.offsetHeight + "px";
    bannerb.style.width = img.offsetWidth * li.length + "px";
    bannerb.style.left = "0px";

    //轮播图
    function animate(offset) {
    bannerb.style.transition = "0.5s";
      bannerb.style.left = -parseInt(offset )* index + "px";
    }

    next.onclick = function () {
        //点击下一页：移动
         if(index == spanNode.length){
            index = 0;
        }
        index ++;

        animate(img.offsetWidth)
        showButton()

    }

    prev.onclick = function () {
          if(index == 1){
            index = li.length-1;

        }
        index--;
        animate(img.offsetWidth)
        showButton()

    }


function showButton() {

    for (var i = 0; i< spanNode.length; i++){

        spanNode[i].className = '';

    }
    spanNode[index-1].className = "on";

}


//自动轮播

    function play() {
        timer = setInterval(function () {
            bannerb.style.transition = "none";
        setTimeout(function () {
             next.onclick();
        },200)
    },1500);
    }


//当鼠标移动上去的时候:点击事件与轮播事件冲突

    containerc.onmouseover = function () {
        //清除定时器
        clearInterval(timer);
    }
    containerc.onmouseout = function () {
        play()
    }

//鼠标点击对应小圆点：自动切换
    function ButtonImage() {
        for (var i = 0; i< spanNode.length; i++){
            spanNode[i].onclick = function () {
                var myIndex = parseInt(this.getAttribute('index'));
                    index = myIndex;
                   animate(img.offsetWidth);
                    showButton();
            }

        }

    }
    ButtonImage()
}





